<template>
    <div class="card" v-if="searchResults.length !== 0">
        <div class="card-body" v-for="searchresult in searchResults" :key="searchresult.id">
            <div class="card">
                <div class="card-body card-bosy-single">
                    <span>书名：{{ searchresult.title }}</span>
                    <span>作者：{{ searchresult.author }}</span>
                    <span>出版社：{{ searchresult.publisher }}</span>
                    <span>库存：{{ searchresult.stock }}</span>
                    <button type="button" class="btn btn-success" @click="add_stock(searchresult.id, searchresult.score, searchresult.stock, searchresult.title)">增加库存</button>
                    <button type="button" class="btn btn-danger" @click="delete_a_book(searchresult.id, searchresult.title)">下架书籍</button>
                </div>
            </div>
        </div>
    </div>
    <div class="card" v-if="searchUserResults.length !== 0">
        <div class="card-body" v-for="searchuserresult in searchUserResults" :key="searchuserresult.id" @click="to_usercontart(searchuserresult.id)">
            <div class="card">
                <div class="card-body">
                    <span><img :src="searchuserresult.photo" alt="" class="user_photo"></span>
                    <span class="user_nickname user_info">{{ searchuserresult.nickname }}</span>
                    <span class="user_info">学院：{{searchuserresult.collegename}}</span>
                    <span class="user_info">班级：{{ searchuserresult.classname }}</span>
                    <span class="user_info">学号：{{ searchuserresult.username }}</span>
                    <button type="button" class="btn btn-danger" @click.stop="delete_a_user(searchuserresult.id, searchuserresult.username)">删除账号</button>
                </div>
            </div>
        </div>
    </div>
    <div class="card" v-if="searchUserResults.length === 0 && searchResults.length === 0">
        <div class="card-body card-search-empty">
            <h1>未查询到任何结果</h1>
        </div>
    </div>
    <div class="tanchuang" v-if="is_open_delete">
        <div class="mb-3">
            <div class="info_confirm">请确认书籍名称是否正确</div>
            <input type="text" class="form-control" :placeholder="delete_book_name" disabled>
        </div>
        <div>
            <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_delete_book">确定</button>
            <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
        </div>
    </div>
    <div class="tanchuang" v-if="is_open_add">
        <div class="mb-3">
            <div class="info_confirm">请确认书籍名称是否正确</div>
            <input type="text" class="form-control" :placeholder="add_book_name" disabled>
            <div class="info_confirm">请输入增加库存的数量</div>
            <input type="text" class="form-control" v-model="add_stock_count">
        </div>
        <div>
            <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_add_stock">确定</button>
            <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
        </div>
    </div>
    <div class="tanchuang" v-if="is_open_detele_user">
        <div class="mb-3">
            <div class="info_confirm">删除用户的学号</div>
            <input type="text" class="form-control" :placeholder="delete_user_number" disabled>
        </div>
        <div>
            <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_delete_user">确定</button>
            <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
        </div>
    </div>
</template>

<script>
import { useStore } from 'vuex';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import $ from 'jquery';
export default {
    name: "AdminSearchView",
    setup() {
        const store = useStore();
        const router = useRouter();
        const is_open_delete = ref(false);
        const is_open_add  =ref(false);
        const is_open_detele_user = ref(false);
        const delete_book_id = ref('');
        const delete_book_name = ref('');
        const add_book_id = ref('');
        const add_book_stock = ref('');
        const add_book_score = ref('');
        const add_stock_count = ref('');
        const add_book_name = ref('');
        const delete_user_id = ref('');
        const delete_user_number = ref('');
        const searchResults = computed(() => store.state.search.searchResults);
        const searchUserResults = computed(() => store.state.search.searchUserResults);
        
        const delete_a_book = (bookid, bookname) => {
            is_open_delete.value = true;
            delete_book_id.value = bookid;
            delete_book_name.value = bookname;
        }

        const confirm_delete_book = () => {
            if (store.state.user.is_login) {
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/getbooks/",
                    type: "DELETE",
                    data: {
                        id: delete_book_id.value
                    },
                    success() {
                        is_open_delete.value = false;
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const add_stock = (bookid, bookscore, bookstock, bookname) => {
            is_open_add.value = true;
            add_book_id.value = bookid;
            add_book_score.value = bookscore;
            add_book_stock.value = bookstock;
            add_book_name.value = bookname;
        }

        const confirm_add_stock = () => {
            if (store.state.user.is_login) {
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/getbooks/",
                    type: "PATCH",
                    data: {
                        book_id: add_book_id.value,
                        stock: parseInt(add_book_stock.value) + parseInt(add_stock_count.value),
                        score: parseInt(add_book_score.value) + 5,
                    },
                    success() {
                        is_open_add.value = false;
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const delete_a_user = (studentid, studentnumber) => {
            is_open_detele_user.value = true;
            delete_user_id.value = studentid;
            delete_user_number.value = studentnumber;
        }

        const confirm_delete_user = () => {
            if (store.state.user.is_login) {
                $.ajax({
                    url: "http://47.121.28.202:8000/settings/deletestudent/",
                    type: "DELETE",
                    headers: {
                        'Authorization': "Bearer " + store.state.user.access,
                    },
                    data: {
                        student_id: parseInt(delete_user_id.value),
                    },
                    success() {
                        is_open_detele_user.value = false;
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const to_usercontart = (userid) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'ordinarydialogue',
                    params: {
                        userid
                    }
                })
            } else {
                router.push({
                    name: 'login',
                })
            }
        }

        const close = () => {
            is_open_add.value = false;
            is_open_delete.value = false;
            is_open_detele_user.value = false;
        }

        return {
            searchResults,
            searchUserResults,
            delete_a_book,
            is_open_delete,
            confirm_delete_book,
            delete_book_name,
            add_stock,
            is_open_add,
            confirm_add_stock,
            add_stock_count,
            close,
            add_book_name,
            is_open_detele_user,
            confirm_delete_user,
            delete_a_user,
            delete_user_number,
            to_usercontart,
        }
    }
}

</script>

<style scoped>
.card-bosy-single > span {
    margin-right: 30px;
}
.btn-danger {
    float: right;
    margin-right: 20px;
}
.tanchuang {
    position: fixed;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%);  
    height: 350px;  
    width: 500px;  
    background-color: rgba(211, 211, 211, 0.9);
    z-index: 1000;  
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;  
    padding: 20px;  
    box-sizing: border-box;
    border-radius: 10px;
}
.btn-tanchuang {
    margin-left: 10px;
    margin-right: 10px;
}
.user_photo {
    width: 40px;
    margin-right: 10px;
}
.user_nickname {
    font-weight: bold;
}
.user_info {
    margin-right: 10px;
}
.card-search-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>